<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>WebGL - light cube</title>
  <link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" />
</head>

<body>
  <div class="description">
    test cube
  </div>
  <canvas id="canvas"></canvas>
  <div id="uiContainer">
    <div id="ui">
      <div id="x"></div>
      <div id="y"></div>
      <div id="angle"></div>
      <div id="scaleX"></div>
      <div id="scaleY"></div>
    </div>
  </div>
</body>
<!-- vertex shader -->
<script id="vertex-shader-2d" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec3 a_color;
attribute vec3 a_norm;
attribute vec2 a_texCoor;

uniform vec3 u_cameraPos;
uniform vec4 u_lighColor;
uniform vec4 u_lighDirect;
uniform vec3 u_lighPos;
uniform vec4 u_amibLigh;
uniform mat4 u_normMat;
uniform mat4 u_modelMat;

uniform mat4 u_mvpmat;
varying vec4 v_color;
varying vec3 v_lighPos;
varying vec3 v_norm;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
varying vec4 v_amib;

varying vec2 v_texCoor;

void main() {
  gl_Position = u_mvpmat * a_position;
  v_norm = normalize(vec3(a_norm));
  v_surfaceToLight = u_lighPos - vec3(a_position);
  v_surfaceToView = u_cameraPos - vec3(a_position);
  v_color = vec4(a_color,1.0);
  v_amib = u_amibLigh;
  
  v_texCoor = a_texCoor;
}
</script>
<!-- fragment shader v_color+vec4(v_texCoor,0.5,0.5); -->
<script id="fragment-shader-2d" type="x-shader/x-fragment">
precision mediump float;
uniform float u_shine;
uniform sampler2D u_sampler;

varying vec4 v_color;
varying vec3 v_lighPos;
varying vec3 v_norm;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
varying vec4 v_amib;

varying vec2 v_texCoor;
void main() {
  vec3 normal = normalize(v_norm);
  vec3 lightDirection = normalize(v_surfaceToLight);
  vec3 cameraDirection = normalize(v_surfaceToView);
  vec3 halfVec = normalize(lightDirection + cameraDirection);

  float light = dot(normal, lightDirection);
  float specular = 0.0;
  if (light > 0.0) {
    specular = pow(dot(normal, halfVec), u_shine);
  }
  vec4 tmp = texture2D(u_sampler, v_texCoor);
  gl_FragColor = tmp;
  gl_FragColor.rgb *= light;
  gl_FragColor.rgb += v_amib.rgb*tmp.rgb;
  gl_FragColor.rgb += specular;
}
</script>


<script id="vertex-shader-2d_new" type="x-shader/x-vertex">
  attribute vec4 a_position2;
  attribute vec4 a_color2;
  uniform mat4 u_mvpmat2;
  varying vec4 v_color2;
  void main() {
    gl_Position = u_mvpmat2 * a_position2;
    v_color2 = a_color2;
  }
  </script>
  <!-- fragment shader v_color+vec4(v_texCoor,0.5,0.5); -->
  <script id="fragment-shader-2d_new" type="x-shader/x-fragment">
  precision mediump float;

  varying vec4 v_color2;
  void main() {
    gl_FragColor = v_color2;
  }
  </script>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="resources/webgl-utils.js"></script>
<script src="resources/webgl-lessons-ui.js"></script>
<script src="resources/m3.js"></script>
<script src="resources/m4.js"></script>
<script>
  "use strict";



  let getPosData2 = function(){
    return new Float32Array([   // Coordinates
        1.0*20.0000, 1.0*20.0000+400.000, 1.0*20.0000,  -1.0*20.0000, 1.0*20.0000+400.000, 1.0*20.0000,  -1.0*20.0000,-1.0*20.0000+400.000, 1.0*20.0000,   1.0*20.0000,-1.0*20.0000+400.000, 1.0*20.0000, // v0-v1-v2-v3 front
        1.0*20.0000, 1.0*20.0000+400.000, 1.0*20.0000,   1.0*20.0000,-1.0*20.0000+400.000, 1.0*20.0000,   1.0*20.0000,-1.0*20.0000+400.000,-1.0*20.0000,   1.0*20.0000, 1.0*20.0000+400.000,-1.0*20.0000, // v0-v3-v4-v5 right
        1.0*20.0000, 1.0*20.0000+400.000, 1.0*20.0000,   1.0*20.0000, 1.0*20.0000+400.000,-1.0*20.0000,  -1.0*20.0000, 1.0*20.0000+400.000,-1.0*20.0000,  -1.0*20.0000, 1.0*20.0000+400.000, 1.0*20.0000, // v0-v5-v6-v1 up
        -1.0*20.0000, 1.0*20.0000+400.000, 1.0*20.0000,  -1.0*20.0000, 1.0*20.0000+400.000,-1.0*20.0000,  -1.0*20.0000,-1.0*20.0000+400.000,-1.0*20.0000,  -1.0*20.0000,-1.0*20.0000+400.000, 1.0*20.0000, // v1-v6-v7-v2 left
        -1.0*20.0000,-1.0*20.0000+400.000,-1.0*20.0000,   1.0*20.0000,-1.0*20.0000+400.000,-1.0*20.0000,   1.0*20.0000,-1.0*20.0000+400.000, 1.0*20.0000,  -1.0*20.0000,-1.0*20.0000+400.000, 1.0*20.0000, // v7-v4-v3-v2 down
        1.0*20.0000,-1.0*20.0000+400.000,-1.0*20.0000,  -1.0*20.0000,-1.0*20.0000+400.000,-1.0*20.0000,  -1.0*20.0000, 1.0*20.0000+400.000,-1.0*20.0000,   1.0*20.0000, 1.0*20.0000+400.000,-1.0*20.0000  // v4-v7-v6-v5 back
      ]);
  }
  
  let getPosData = function(){
    return new Float32Array([   // Coordinates
        1.0*200.00, 1.0*200.00, 1.0*200.00,  -1.0*200.00, 1.0*200.00, 1.0*200.00,  -1.0*200.00,-1.0*200.00, 1.0*200.00,   1.0*200.00,-1.0*200.00, 1.0*200.00, // v0-v1-v2-v3 front
        1.0*200.00, 1.0*200.00, 1.0*200.00,   1.0*200.00,-1.0*200.00, 1.0*200.00,   1.0*200.00,-1.0*200.00,-1.0*200.00,   1.0*200.00, 1.0*200.00,-1.0*200.00, // v0-v3-v4-v5 right
        1.0*200.00, 1.0*200.00, 1.0*200.00,   1.0*200.00, 1.0*200.00,-1.0*200.00,  -1.0*200.00, 1.0*200.00,-1.0*200.00,  -1.0*200.00, 1.0*200.00, 1.0*200.00, // v0-v5-v6-v1 up
        -1.0*200.00, 1.0*200.00, 1.0*200.00,  -1.0*200.00, 1.0*200.00,-1.0*200.00,  -1.0*200.00,-1.0*200.00,-1.0*200.00,  -1.0*200.00,-1.0*200.00, 1.0*200.00, // v1-v6-v7-v2 left
        -1.0*200.00,-1.0*200.00,-1.0*200.00,   1.0*200.00,-1.0*200.00,-1.0*200.00,   1.0*200.00,-1.0*200.00, 1.0*200.00,  -1.0*200.00,-1.0*200.00, 1.0*200.00, // v7-v4-v3-v2 down
        1.0*200.00,-1.0*200.00,-1.0*200.00,  -1.0*200.00,-1.0*200.00,-1.0*200.00,  -1.0*200.00, 1.0*200.00,-1.0*200.00,   1.0*200.00, 1.0*200.00,-1.0*200.00  // v4-v7-v6-v5 back
      ]);
  }
  let data_vertices = getPosData();
  let getColorData = function(){
      return new Float32Array([    // Colors
          1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,     // v0-v1-v2-v3 front
          1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,     // v0-v3-v4-v5 right
          1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,     // v0-v5-v6-v1 up
          1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,     // v1-v6-v7-v2 left
          1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,     // v7-v4-v3-v2 down
          1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0　    // v4-v7-v6-v5 back
      ]);
  }
  let data_colors = getColorData();

  let getNormalData = function(){
      return new Float32Array([    // Normal
        0.0, 0.0, 1.0,   0.0, 0.0, 1.0,   0.0, 0.0, 1.0,   0.0, 0.0, 1.0,  // v0-v1-v2-v3 front
        1.0, 0.0, 0.0,   1.0, 0.0, 0.0,   1.0, 0.0, 0.0,   1.0, 0.0, 0.0,  // v0-v3-v4-v5 right
        0.0, 1.0, 0.0,   0.0, 1.0, 0.0,   0.0, 1.0, 0.0,   0.0, 1.0, 0.0,  // v0-v5-v6-v1 up
      -1.0, 0.0, 0.0,  -1.0, 0.0, 0.0,  -1.0, 0.0, 0.0,  -1.0, 0.0, 0.0,  // v1-v6-v7-v2 left
        0.0,-1.0, 0.0,   0.0,-1.0, 0.0,   0.0,-1.0, 0.0,   0.0,-1.0, 0.0,  // v7-v4-v3-v2 down
        0.0, 0.0,-1.0,   0.0, 0.0,-1.0,   0.0, 0.0,-1.0,   0.0, 0.0,-1.0   // v4-v7-v6-v5 back
      ]);
  }
  let data_normals = getNormalData();

  let getIndiceData = function(){
      return new Uint8Array([
        0, 1, 2,   0, 2, 3,    // front
        4, 5, 6,   4, 6, 7,    // right
        8, 9,10,   8,10,11,    // up
        12,13,14,  12,14,15,    // left
        16,17,18,  16,18,19,    // down
        20,21,22,  20,22,23     // back
    ]);
  }
  // Indices of the vertices
  let data_indices = getIndiceData();

 let data_texCor = new Float32Array([
      0, 1,
      0, 0,
      1, 1,
      1, 0,
      0, 1,
      0, 0,
      1, 1,
      1, 0,
      0, 1,
      0, 0,
      1, 1,
      1, 0,
      0, 1,
      0, 0,
      1, 1,
      1, 0,
      0, 1,
      0, 0,
      1, 1,
      1, 0,
      0, 1,
      0, 0,
      1, 1,
      1, 0,
      0, 1,
      0, 0,
      1, 1,
      1, 0,]);
  let program;
  function main() {
    // Get A WebGL context
    /** @type {HTMLCanvasElement} */
    let canvas = document.querySelector("#canvas");
    let gl = canvas.getContext("webgl");
    if (!gl) {
      return;
    }

    // setup GLSL program
    program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // Clear the canvas.
    gl.clear(gl.COLOR_BUFFER_BIT);
    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);
    
    let positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    let positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data_vertices,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.vertexAttribPointer(
      positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

    let colorAttr = gl.getAttribLocation(program, "a_color");
    let colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data_colors,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(colorAttr);
    gl.vertexAttribPointer(
      colorAttr, 3, gl.FLOAT, false, 0, 0);


    let normAttr = gl.getAttribLocation(program, "a_norm");
    let normBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, normBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data_normals,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(normAttr);
    gl.vertexAttribPointer(
      normAttr, 3, gl.FLOAT, false, 0, 0);

    let indicesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    gl.bufferData(
      gl.ELEMENT_ARRAY_BUFFER,
      data_indices,
      gl.STATIC_DRAW);


    let u_lighColor = gl.getUniformLocation(program, "u_lighColor");
    gl.uniform4f(u_lighColor, 1.0, 1.0, 1.0,1.0);

    let u_lighDirect = gl.getUniformLocation(program, "u_lighDirect");
    gl.uniform4f(u_lighDirect, 0.0, 0.0, 1.0,1.0);

    let u_lighPos = gl.getUniformLocation(program, "u_lighPos");
    gl.uniform3f(u_lighPos, 0.0, 0.0, 0.0);

    let u_amibLigh = gl.getUniformLocation(program, "u_amibLigh");
    gl.uniform4f(u_amibLigh, 0.7, 0.7, 0.7,1.0);

    let u_shine = gl.getUniformLocation(program, "u_shine");
    gl.uniform1f(u_shine, 90.0);

    let texCoorAttr = gl.getAttribLocation(program, "a_texCoor");
    let texCoBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, texCoBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data_texCor,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(texCoorAttr)
    gl.vertexAttribPointer(texCoorAttr, 2, gl.FLOAT, false, 0, 0)


    let u_normMat = gl.getUniformLocation(program, "u_normMat");
    let norMat = m4.yRotate(90);
    norMat = m4.inverse(norMat);
    norMat = m4.transpose(norMat)
    gl.uniformMatrix4fv(u_normMat, false, norMat)

    let u_modelMat = gl.getUniformLocation(program, "u_modelMat");
    let modMat = m4.translation(0,0,0);
    // modMat = m4.inverse(modMat);
    // modMat = m4.transpose(modMat)
    gl.uniformMatrix4fv(u_modelMat, false, modMat)


    let matrixLocat = gl.getUniformLocation(program, "u_mvpmat");
    
    let projectionMatrix = m4.perspective((Math.PI * 90 / 180), 1, 200, 1000);
    let camera = [1, 600, 300];
    let cameraMatrix = m4.lookAt(new Float32Array(camera), new Float32Array([0, 30, 0]), new Float32Array([0, 1, 0]));

    let u_cameraPos = gl.getUniformLocation(program, "u_cameraPos");
    gl.uniform3fv(u_cameraPos, camera);

    // Make a view matrix from the camera matrix.
    let viewMatrix = m4.inverse(cameraMatrix);

    // Compute a view projection matrix
    let viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
    let worldMatrix = m4.yRotation(0);
    // m4.zRotate(0.5,worldMatrix);
    let worldViewProjectionMatrix = m4.multiply(viewProjectionMatrix, worldMatrix);

    // projectionMatrix = m4.translate(projectionMatrix, 0.2, 0.2, 0.2);
    // projectionMatrix = m4.scale(projectionMatrix, 0.3, 0.3, 0.3);
    // projectionMatrix = m4.zRotate(projectionMatrix, 0);

    gl.uniformMatrix4fv(matrixLocat, false, worldViewProjectionMatrix);

    let tim = Date.now();
    let tim2 = tim;
    let getAngle = function () {
      let cur = Date.now();
      let delta = cur - tim;
      tim = cur;
      return (0.8 * delta / 1000) % 3;
    }
    let rotDis = 0;
    let delt = 0.1;
    gl.uniform3fv(u_lighPos, [0, 400, 0]);
    let rotate = function () {
          // modMat = m4.xRotate(getAngle(),modMat);
        // modMat = m4.inverse(modMat);
        // modMat = m4.transpose(modMat)
        // gl.uniformMatrix4fv(u_modelMat, false, modMat)
        if (rotDis > 400){
          delt = -1; 
        }else if(rotDis < -400){
          delt = 1; 
        }
        rotDis += delt;
        gl.useProgram(program);
        
        worldViewProjectionMatrix = m4.yRotate(worldViewProjectionMatrix, getAngle());
        gl.uniformMatrix4fv(matrixLocat, false, worldViewProjectionMatrix);
    }


    // Draw the scene.
    function drawScene() {
      gl.useProgram(program);
      let primitiveType = gl.TRIANGLES;
      let offset = 0;
      let count = 36;
      // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
      gl.enable(gl.DEPTH_TEST)
      gl.drawElements(primitiveType, count, gl.UNSIGNED_BYTE, offset);
    }
    function func() {
      // rotate();
      drawScene();
      // requestAnimationFrame(func);
    }

    let img = new Image();
    // img.crossOrigin = "anonymous";
    img.addEventListener('load', function () {
      gl.useProgram(program);
      let sampler = gl.getUniformLocation(program, "u_sampler");
      let texture = gl.createTexture();
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, texture);
      // let's assume all images are not a power of 2
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
      gl.uniform1i(sampler, 0);
      // func();
    })
    img.src = "resources/keyboard.jpg"
  }


  let data1 = new Float32Array([
      1*100.000,1*100.000,1*100.000, 1*100.000,
      -1*100.000,1*100.000,1*100.000, 1*100.000,
      -1*100.000,-1*100.000,1*100.000, 1*100.000,
      1*100.000,-1*100.000,1*100.000, 1*100.000,
      1*100.000,-1*100.000,-1*100.000, 1*100.000,
      1*100.000,1*100.000,-1*100.000, 1*100.000,
      -1*100.000,1*100.000,-1*100.000, 1*100.000,
      -1*100.000,-1*100.000,-1*100.000, 1*100.000
    ]);
    let data2 = new Float32Array([
      1, 0, 0, 1,
      1, 0, 0, 1,
      1, 0, 0, 1,
      1, 0, 0, 1,
      0, 1, 0, 1,
      0, 1, 0, 1,
      0, 1, 0, 1,
      0, 1, 0, 1]);

  let program2;
  function main2() {
    // Get A WebGL context
    /** @type {HTMLCanvasElement} */
    let canvas = document.querySelector("#canvas");
    let gl = canvas.getContext("webgl");
    if (!gl) {
      return;
    }

    // setup GLSL program
    program2 = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d_new", "fragment-shader-2d_new"]);

    // webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // Clear the canvas.
    // gl.clear(gl.COLOR_BUFFER_BIT);

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program2);

    
    let positionAttributeLocation = gl.getAttribLocation(program2, "a_position2");
    let positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data1,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.vertexAttribPointer(
      positionAttributeLocation, 4, gl.FLOAT, false, 0, 0);

    let colorAttr = gl.getAttribLocation(program2, "a_color2");
    let colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data2,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(colorAttr);
    gl.vertexAttribPointer(
      colorAttr, 4, gl.FLOAT, false, 0, 0);

    let indices = new Uint8Array([
        0,1,2,0,2,3,
        0,3,4,0,4,5,
        0,5,6,0,6,1,
        1,6,7,1,7,2,
        7,4,3,7,3,2,
        4,7,6,4,6,5]);
        let indicesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    gl.bufferData(
      gl.ELEMENT_ARRAY_BUFFER,
      indices,
      gl.STATIC_DRAW);


    let matrixLocat2 = gl.getUniformLocation(program2, "u_mvpmat2");
    let projectionMatrix = m4.perspective((Math.PI * 90 / 180), 1, 100, 1000);
    let camera = [401, 600, 300];
    let cameraMatrix = m4.lookAt(new Float32Array(camera), new Float32Array([0, 30, 0]), new Float32Array([0, 1, 0]));
    // Make a view matrix from the camera matrix.
    let viewMatrix = m4.inverse(cameraMatrix);
    // Compute a view projection matrix
    let viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
    let worldMatrix = m4.yRotation(0);
    // m4.zRotate(0.5,worldMatrix);
    let worldViewProjectionMatrix2 = m4.multiply(viewProjectionMatrix, worldMatrix);
    worldViewProjectionMatrix2 = m4.scale(worldViewProjectionMatrix2, 1, 1, 1);
    gl.uniformMatrix4fv(matrixLocat2, false, worldViewProjectionMatrix2);


    let tim = Date.now();
    let tim2 = tim;
    let getAngle2 = function () {
        let cur = Date.now();
        let delta = cur - tim;
        tim = cur;
        return (0.8 * delta / 1000) % 3;
    }
    let rotate2 = function () {
        gl.useProgram(program2);
        worldViewProjectionMatrix2 = m4.zRotate(worldViewProjectionMatrix2, getAngle2());
        gl.uniformMatrix4fv(matrixLocat2, false, worldViewProjectionMatrix2);
    }

    // Draw the scene.
    function drawScene2() {
      gl.useProgram(program2);
      let primitiveType = gl.TRIANGLES;
      let offset = 0;
      let count = 36;
      // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
      gl.enable(gl.DEPTH_TEST)
      gl.drawElements(primitiveType,count,gl.UNSIGNED_BYTE, offset );
    }
    function func2() {
      // rotate2();
      drawScene2();
      // requestAnimationFrame(func2);
    }

    // func2();
  }
  main2();
  main();
  setTimeout(function(){
    console.log('main2')
    // main2();
    let canvas = document.querySelector("#canvas");
    let gl = canvas.getContext("webgl");
    let primitiveType = gl.TRIANGLES;
    let offset = 0;
    let count = 36;

    gl.useProgram(program);
    // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
    let indicesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    gl.bufferData(
    gl.ELEMENT_ARRAY_BUFFER,
    data_indices,
    gl.STATIC_DRAW);
    gl.enable(gl.DEPTH_TEST)
    gl.drawElements(primitiveType,count,gl.UNSIGNED_BYTE, offset );

    gl.useProgram(program2);
    let positionAttributeLocation2 = gl.getAttribLocation(program, "a_position");
    let positionBuffer2 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer2);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      getPosData2(),
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(positionAttributeLocation2);
    gl.vertexAttribPointer(
    positionAttributeLocation2, 3, gl.FLOAT, false, 0, 0);

    let indices = getIndiceData()
    let indicesBuffer2 = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer2);
    gl.bufferData(
      gl.ELEMENT_ARRAY_BUFFER,
      indices,
      gl.STATIC_DRAW);
    // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
    gl.enable(gl.DEPTH_TEST)
    gl.drawElements(primitiveType,count,gl.UNSIGNED_BYTE, offset );
  },100);
</script>

</html>